<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		 <style type="text/css">
	 		* {margin: 0;padding: 0;}
			li {list-style: none;}
			a {text-decoration: none;}
			input{/*input去掉选中后的蓝色外框线*/outline: none;}
			ul{display: flex;margin: 0 auto;flex-wrap:wrap;}
			.main ul li{width:23%;background: red;height:;margin:1%;}
			.main ul li img{width:100%;}
		 	@media screen and (min-width:0px) and (max-width: 670px){
		 	 .main ul li{width:98%;background: red;margin:1%;}	
		 	}
		 	@media only screen and (min-width:670px) and (max-width:980px){
		 	.main ul li{width:48%;background: red;margin:1%;}
		 	}
		 	@media only screen and (min-width:981px) and (max-width:1300px){
		 	 .main ul li{width:31.3%;background: red;margin:1%;}
		 	}
		 	@media only screen and (min-width:1301px){
		 	 .main ul li{width:23%;background: red;height:;margin:1%;}	
		 	}
		 </style>
	</head>
	<body>
		<div class="main">
			<ul>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
				<li><img src="img/img1/child1.jpg"/></li>
			</ul>
		</div>
	</body>
</html>
